import React, { useRef, useState } from'react';
import '../../App1.css';

const App1 = () => {
    // 文字编辑相关
    const textEditorRef = useRef(null);
    const changeFont = (fontName) => {
        if (textEditorRef.current) {
            document.execCommand('fontName', false, fontName);
        }
    };
    const alignLeft = () => {
        if (textEditorRef.current) {
            document.execCommand('justifyLeft', false, null);
        }
    };
    const alignCenter = () => {
        if (textEditorRef.current) {
            document.execCommand('justifyCenter', false, null);
        }
    };
    const alignRight = () => {
        if (textEditorRef.current) {
            document.execCommand('justifyRight', false, null);
        }
    };
    const makeBold = () => {
        if (textEditorRef.current) {
            document.execCommand('bold', false, null);
        }
    };
    const makeItalic = () => {
        if (textEditorRef.current) {
            document.execCommand('italic', false, null);
        }
    };
    const makeUnderline = () => {
        if (textEditorRef.current) {
            document.execCommand('underline', false, null);
        }
    };

    // 图片编辑相关
    const imageRef = useRef(null);
    const [imageSrc, setImageSrc] = useState('');
    const handleImageUpload = (e) => {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = (event) => {
                setImageSrc(event.target.result);
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    };
    const cropImage = (x, y, width, height) => {
        const img = new Image();
        img.src = imageSrc;
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
            const dataURL = canvas.toDataURL('image/png');
            setImageSrc(dataURL);
        };
    };
    const scaleImage = (factor) => {
        if (imageRef.current) {
            imageRef.current.style.transform = `scale(${factor})`;
        }
    };
    const rotateImage = (degrees) => {
        const img = new Image();
        img.src = imageSrc;
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const width = img.width;
            const height = img.height;
            canvas.width = width;
            canvas.height = height;
            ctx.translate(width / 2, height / 2);
            ctx.rotate((degrees * Math.PI) / 180);
            ctx.drawImage(img, -width / 2, -height / 2);
            const dataURL = canvas.toDataURL('image/png');
            setImageSrc(dataURL);
        };
    };
    const flipImage = (direction) => {
        const img = new Image();
        img.src = imageSrc;
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const width = img.width;
            const height = img.height;
            canvas.width = width;
            canvas.height = height;
            if (direction === 'horizontal') {
                ctx.scale(-1, 1);
                ctx.drawImage(img, -width, 0);
            } else if (direction ==='vertical') {
                ctx.scale(1, -1);
                ctx.drawImage(img, 0, -height);
            }
            const dataURL = canvas.toDataURL('image/png');
            setImageSrc(dataURL);
        };
    };
    const applyFilter = (filterValue) => {
        if (imageRef.current) {
            imageRef.current.style.filter = filterValue;
        }
    };

    return (
        <div className="App">
            {/* 文字编辑区域 */}
            <div className="text - editor" ref={textEditorRef} contentEditable="true"></div>
            <div className="text - tools">
                <button onClick={() => changeFont('Arial')}>Arial</button>
                <button onClick={() => changeFont('Times New Roman')}>Times New Roman</button>
                <button onClick={alignLeft}>左对齐</button>
                <button onClick={alignCenter}>居中对齐</button>
                <button onClick={alignRight}>右对齐</button>
                <button onClick={makeBold}>加粗</button>
                <button onClick={makeItalic}>斜体</button>
                <button onClick={makeUnderline}>下划线</button>
            </div>

            {/* 图片编辑区域 */}
            <input type="file" onChange={handleImageUpload} />
            {imageSrc && (
                <div className="image - container">
                    <img ref={imageRef} src={imageSrc} alt="目标图片" />
                </div>
            )}
            <div className="image - tools">
                <button onClick={() => cropImage(50, 50, 200, 200)}>裁剪图片</button>
                <button onClick={() => scaleImage(1.2)}>放大图片</button>
                <button onClick={() => scaleImage(0.8)}>缩小图片</button>
                <button onClick={() => rotateImage(90)}>顺时针旋转 90 度</button>
                <button onClick={() => rotateImage(-90)}>逆时针旋转 90 度</button>
                <button onClick={() => flipImage('horizontal')}>水平翻转</button>
                <button onClick={() => flipImage('vertical')}>垂直翻转</button>
                <button onClick={() => applyFilter('grayscale(1)')}>灰度滤镜</button>
                <button onClick={() => applyFilter('sepia(1)')}>棕褐色滤镜</button>
                <button onClick={() => applyFilter('none')}>移除滤镜</button>
            </div>
        </div>
    );
};

export default App1;